<template>
	<view>
		<view class="wrap">
			<!-- banner轮播图区域 -->
			<swiper indicator-dots circular autoplay="ture" interval="2000">
				<swiper-item v-for="item in list">
					<image :src="item.pic"></image>
				</swiper-item>
			</swiper>
			<!-- 导航区域 -->
			<view class="nav">
				<view class="nav-box" @click="day">
					<view class="nav-icon" >
						<image src="../../static/nav/rli.png" mode=""></image>
					</view>
					<text class="nav-text">每日推荐</text>
				</view>	
				<view class="nav-box" @click="fm">
					<view class="nav-icon">
						<image src="../../static/nav/shouyinji.png" mode=""></image>
					</view>
					<text class="nav-text">私人FM</text>
				</view>	
				<view class="nav-box" @click="square1">
					<view class="nav-icon" >
						<image src="../../static/nav/gedan.png" mode=""></image>
					</view>
					<text class="nav-text">歌单</text>
				</view>	
				<view class="nav-box">
					<view class="nav-icon" @click="gorank">
						<image src="../../static/nav/paihangbang.png" mode=""></image>
					</view>
					<text class="nav-text">排行榜</text>
				</view>	
				<view class="nav-box">
					<view class="nav-icon">
						<image src="../../static/nav/zhibo.png" mode=""></image>
					</view>
					<text class="nav-text">直播</text>
				</view>	
			</view>
		</view>
		
	</view>
</template>

<script>
	import request from 'utils/request.js'
	export default {
		data() {
			return {
				list: []
			};
		},
		mounted(){
			this.getSwiptes()
		},
		methods:{
			async getSwiptes(){
				let bannerListData = await request('/banner', {type: 2});//轮播图
				// type---->0: pc,1: android,2: iphone,3: ipad
				this.list = bannerListData.banners
			},
			day(){
				uni.navigateTo({
					url:"../../pages/find/nav/nav_everyday"
				})
			},
			fm(){
				uni.navigateTo({
					animationType: 'pop-in',
					animationDuration: 1000,
					url:"../../pages/find/fm/fm"
				})
			},
			square1(){
				uni.navigateTo({
					url:"../../pages/find/square/square"
				})
			},
			gorank(){
				uni.navigateTo({
					url:"../../pages/find/rank/rank"
				})
			}
		}
	}
</script>

<style lang="scss">
.wrap{
	  background-color: #fbfbfc;
	  height:500rpx;
	  border-radius: 30px;
	 
  }
  swiper{
	  height:300rpx;
	  margin-top:40rpx;
	  margin-left:55rpx;
	  margin-bottom: 40rpx;
	  padding-top:40rpx;
  }
  image{
	  border-radius: 20px;
	  height:300rpx;
  }
  //导航栏
  .nav{ 
	  display: flex;
	  width:100%;
	  height:120rpx;
  }
  .nav-box{
	  width:100rpx;
	  height:120rpx;
	  margin-left:43rpx;
  }
  .nav-icon{
	  width:80rpx;
	  height:80rpx;
	  border-radius: 50%;
	  background-color: #fef0f0;
	  position: relative;
	  margin-left:8rpx;
	  image{
		 
		  width:50rpx;
		  height:50rpx;
		position: absolute;
		left:16rpx;
		top:16rpx;
	  }
  }
  .nav-text{
	  font-size: 16rpx;
	  font-weight: 600;
	  display: block;
	  text-align:center;
  }
</style>
